<template>
  <div class="statistics-content statistics-2">
    <div class="count-block">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div class="count-item">
        <div class="count">{{ count.unit }}</div>
        <div class="text">用人单位</div>
      </div>
      <div class="count-item">
        <div class="count">{{ count.recruitPosition }}</div>
        <div class="text">在招岗位</div>
      </div>
      <div class="count-item">
        <div class="count">{{ count.allPosition }}</div>
        <div class="text">全部岗位</div>
      </div>
      <div class="count-item">
        <div class="count">{{ count.jobHunter }}</div>
        <div class="text">求职人数</div>
      </div>
      <div class="count-item">
        <div class="count">{{ count.sendCVNum }}</div>
        <div class="text">简历投递人</div>
      </div>
      <div class="count-item">
        <div class="count">{{ count.sendCV }}</div>
        <div class="text">简历投递量</div>
      </div>
    </div>
    <div class="statistics-block salary-block full">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div id="salary" class="chart"></div>
    </div>
    <div class="statistics-block unit-rank-block">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div class="rank-list-content">
        <div class="rank-title">用人单位热度排名</div>
        <div class="rank-block">
          <div class="rank-item head">
            <div class="col-item rank">排名</div>
            <div class="col-item name">公司名称</div>
            <div class="col-item count">投递数量</div>
          </div>
          <div v-for="(item,index) in unitRank" :key="item.id" class="rank-item body">
            <div class="col-item rank" :class="index<3?'background':''">{{index+1}}</div>
            <div class="col-item name">{{item.name}}</div>
            <div class="col-item count">{{item.count}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="statistics-block education-block">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div id="education" class="chart"></div>
    </div>
    <div class="statistics-block age-block">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div id="age" class="chart"></div>
    </div>
    <div class="statistics-block full-part-block">
      <div class="corner upper-left"></div>
      <div class="corner upper-right"></div>
      <div class="corner low-right"></div>
      <div class="corner left-lower"></div>
      <div id="full-part" class="chart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Statistics3",
  data(){
    return{
      count:{
        unit:179,
        recruitPosition:312,
        allPosition:603,
        jobHunter:1892,
        sendCVNum:1031,
        sendCV:1087,
      },
      unitRank:[
        {id:1,name:'酒泉创新达建设工程有限责任公司',count:278},
        {id:2,name:'甘肃路宏环保有限责任公司',count:265},
        {id:3,name:'酒泉荣庆再生资源利用有限责任公司',count:231},
        {id:4,name:'甘肃利百诚信息咨询有限责任公司',count:219},
        {id:5,name:'甘肃文航星物业管理有限公司',count:198},
        {id:6,name:'甘肃文航星物业管理有限公司',count:198}
      ]
    }
  },
  methods:{
    initSalary(){
      let myCharts = this.$echarts.init(document.getElementById('salary'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '行业供求薪资分布',
          top:15,
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          top:'20%',
          left: '5%',
          right: '0',
          bottom: '20%',
        },
        xAxis: {
          data:  ['农、林、牧、渔业', '采矿业', '制造业', '电力、热力、燃气及水生产和供应业', '建筑业', '交通运输、仓储和邮政业', '信息传输、软件和信息技术服务业', '批发和零售业', '住宿和餐饮业', '金融业', '房地产业', '租赁和商务服务业', '科学研究和技术服务业', '水利、环境和公共设施管理业', '居民服务、修理和其他服务业', '教育', '卫生和社会工作', '文化、体育和娱乐业', '公共管理、社会保障和社会组织', '国际组织'],//横轴数据
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        color: ['#2E69D5', '#CABC7F'],
        series: [{
          name: '平均期望薪资',
          type: 'line',
          data: [21, 24, 28, 32, 14, 28, 32, 14, 21, 24, 28, 32, 14, 28, 32, 14, 28, 32, 14, 32],//y轴数据
        },{
          name: '平均岗位薪资',
          type: 'line',
          data: [80, 24, 28, 32, 14, 28, 32, 14, 21, 24, 28, 32, 14, 28, 32, 14, 28, 32, 14, 32],//y轴数据
        },]
      }
      myCharts.hideLoading()
      myCharts.setOption(option);
    },
    initEducation() {
      let myCharts = this.$echarts.init(document.getElementById('education'));
      let option = {
        title: {
          text: '劳动力学历分布',
          left:'center',
          top:10,
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        series: [
          {
            name: '求职者学历分布',
            type: 'pie',
            radius: ['0%', '60%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  color:'#fff'
                }
              }
            },
            data: [
              {value: 40, name: '高中'},
              {value: 38, name: '大专'},
              {value: 32, name: '大学'},
              {value: 30, name: '博士及以上'},
              {value: 30, name: '中专、中技'},
            ]
          }
        ]
      };
      myCharts.setOption(option)
    },
    initAge() {
      let myCharts = this.$echarts.init(document.getElementById('age'));
      let option = {
        title: {
          text: '求职者年龄分布',
          left:'center',
          top:10,
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        series: [
          {
            name: '劳动力年龄分布',
            type: 'pie',
            radius: ['0%', '60%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  color:'#fff'
                }
              }
            },
            data: [
              {value: 40, name: '16-24岁'},
              {value: 38, name: '25-35岁'},
              {value: 32, name: '35-45岁'},
              {value: 30, name: '45-55岁'},
              {value: 28, name: '55岁以上'},
            ]
          }
        ]
      };
      myCharts.setOption(option)
    },
    initFullPart() {
      let myCharts = this.$echarts.init(document.getElementById('full-part'));
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#E66D72', '#4EB2ED'],
        title: {
          text: '求职者全职/兼职占比',
          top:10,
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        legend: {
          top: '15%',
          right: 0,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff"
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '50%'],
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            itemStyle:{
              normal:{
                label:{
                  color:'#fff'
                }
              }
            },
            labelLine: {
              show: true,
            },
            data: [
              {value: 1048, name: '全职'},
              {value: 735, name: '兼职'},
            ]
          }
        ]
      };
      myCharts.setOption(option)
    },
  },
  mounted() {
    this.initSalary();
    this.initEducation();
    this.initAge();
    this.initFullPart();
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 1px solid #46a9ff;
.statistics-content{
  width:calc(100% - 40px);
  margin: 0 auto;
  height: calc(100% - 97px);
  padding:15px;
  margin-top: 8px;
  .rank-list-content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    .rank-title{
      margin-top: 15px;
      width: 100%;
      color: #23ffff;
      font-size: 17px;
      text-align: center;
      font-weight: bold;
    }
    .rank-block{
      display: flex;
      flex-direction: column;
      .rank-item{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        .col-item{
          display: flex;
          align-items: center;
          color: #fff;
          padding: 0 5px;
        }
        .col-item.rank{
          width: 50px;
          justify-content: center;
        }
        .col-item.name{
          width: calc(100% - 150px);
          margin-left: 20px;
          justify-content: flex-start;
          display: block;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .col-item.count{
          width:100px;
          justify-content: center;
          font-size: 14px;
        }
      }
      .rank-item.head{
        height: 35px;
        margin-bottom: 5px;
        .col-item{
          justify-content: center;
          color: #2671BE;
          font-weight: bold;
          font-size: 17px;
        }
        .col-item.name{
          justify-content: flex-start;
        }
      }
      .rank-item.body{
        height: 30px;
        margin-bottom: 10px;
        .col-item.rank.background{
          background: #F36838;
          margin: 0 12.5px;
          width: 25px;
          height: 25px;
          border-radius: 4px;
          font-size: 14px;
        }
      }
      .rank-item.body:last-child{
        margin-bottom: 0;
      }
    }
  }
  .count-block{
    width: 100%;
    height: 110px;
    border: $border;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: $boxshadow;
    .count-item{
      width: calc((100% - 5px)/6);
      height: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-right: $border;
      .count{
        color: #FFEC76;
        font-size: 40px;
        font-weight: bold;
      }
      .text{
        font-size: 16px;
        color: #fff;
      }
    }
    .count-item:last-child{
      border: none;
    }
  }

  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }
  .statistics-block{
    padding: 10px;
  }
}
.statistics-content {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .statistics-block {
    height: calc((100% - 150px)/2);
    width: calc((100% - 20px) / 3);
    position: relative;
    border: $border;
    box-shadow: $boxshadow;
    margin-top: 20px;
  }
  .statistics-block.salary-block,.statistics-block.education-block,.statistics-block.age-block{

    margin-right: 20px;
  }
  .education-block,.age-block{
    width: calc((100% - 20px)/3 - 10px);
  }
  .full-part-block{
    width: calc((100% - 20px)/3);
  }
  .statistics-block.full {
    width: calc((100% - 20px) / 3 * 2);
  }
}
</style>
